<template data-sly-template.dialogTemplate="${@ packageModel, initialResources}">
    <coral-dialog id="editDialog" class="modal-form foundation-toggleable" closable="${packageModel ? 'on' : 'off'}" backdrop="static">
        <coral-dialog-header>${packageModel ? 'Edit' : 'Create'} Package</coral-dialog-header>
        <coral-dialog-content>
            <form action="/services/backpack/package" method="${packageModel ? 'put' : 'post'}"
                  class="coral-Form coral-Form--vertical foundation-form"
                  data-foundation-form-ajax="true"
                  data-foundation-form-loadingmask="true">
                <meta class="foundation-form-response-ui-success backpack-meta"
                      data-foundation-form-response-ui-success="{&#34;name&#34;:&#34;foundation.prompt.open&#34;,&#34;open&#34;:null,&#34;redirect&#34;:null,&#34;title&#34;:&#34;Success&#34;,&#34;message&#34;:null}">
                <div class="coral-FixedColumn">
                    <div class="coral-FixedColumn-column">
                        <div class="coral-Form-fieldwrapper">
                            <label class="coral-Form-fieldlabel">Name *</label>
                            <input  class="coral-Form-field"
                                    type="text"
                                    name="packageName"
                                    placeholder="New Package"
                                    aria-label="New Package"
                                    value="${packageModel.packageName}" aria-required="true" is="coral-textfield" />
                        </div>
                        <sly data-sly-use.template="/apps/etoolbox-backpack/admin/console/components/package/templates/group.html"
                             data-sly-call="${template.autocompleteTemplate @ selectedPackageGroup = packageModel.group}"/>
                        <div class="coral-Form-fieldwrapper">
                            <label class="coral-Form-fieldlabel">Version</label>
                            <input class="coral-Form-field"
                                   type="text"
                                   name="version"
                                   placeholder="1.0"
                                   value="${packageModel.version}" aria-label="1.0" is="coral-textfield" />
                        </div>
                        <div class="coral-Form-fieldwrapper">
                            <label class="coral-Form-fieldlabel">Thumbnail Path</label>
                            <foundation-autocomplete class="coral-Form-field"
                                                     data-regex=".png$"
                                                     data-foundation-validation
                                                     data-validation-message="Please choose a PNG image."
                                                     name="thumbnailPath"
                                                     pickersrc="/mnt/overlay/granite/ui/content/coral/foundation/form/pathfield/picker.html?_charset_=utf-8&amp;path={value}&amp;root=%2fcontent%2fdam&amp;filter=hierarchyNotFile&amp;selectionCount=single">
                                <coral-overlay class="foundation-picker-buttonlist"
                                               foundation-autocomplete-suggestion
                                               data-foundation-picker-buttonlist-src="/mnt/overlay/granite/ui/content/coral/foundation/form/pathfield/suggestion{.offset,limit}.html?_charset_=utf-8&amp;root=%2fcontent%2fdam&amp;filter=hierarchyNotFile{&amp;query}"></coral-overlay>
                                <coral-taglist foundation-autocomplete-value name="thumbnailPath">
                                    <coral-tag value="${packageModel.thumbnailPath}">${packageModel.thumbnailPath}</coral-tag>
                                </coral-taglist>
                            </foundation-autocomplete>
                        </div>
                        <input data-sly-test="${packageModel.packagePath}" type="hidden" name="packagePath" value="${packageModel.packagePath}">
                        <sly data-sly-repeat.initialResource="${initialResources}">
                            <input type="hidden" name="initialResource" value="${initialResource}">
                        </sly>
                        <div>
                            <button type="submit" autocomplete="off" is="coral-button" variant="primary" trackingfeature="" trackingelement="save" tracking="ON">Save</button>
                            <button data-sly-test="${packageModel}" is="coral-button" type="button" variant="secondary" coral-close="">Cancel</button>
                            <button data-sly-test="${!packageModel}" id="cancelButton" is="coral-button" type="button" variant="secondary">Cancel</button>
                        </div>
                    </div>
                </div>
            </form>
        </coral-dialog-content>
    </coral-dialog>
</template>